<template>
  <div id="page-club">
    <h2>俱乐部/赛事方详细信息</h2>

    <Card>
      <Form
        ref="form"
        :model="form.data"
        :rules="ruleValidate"
        :label-width="120"
        class="club-info-form mt20">
        <Row>
          <Col span="11">
            <FormItem prop="logoPath" label="Logo">
              <upload-img v-if="loaded" @on-change="onUploadLogoImg" :defaultImageList="defaultLogoImageList" maxLength="1"></upload-img>
            </FormItem>
            <FormItem prop="rclubName" label="全称">
              <Input v-model="form.data.rclubName" type="text" placeholder="请输入" :maxlength="50"></Input>
            </FormItem>
            <FormItem label="所在区域">
              <Row>
                <Col span="8">
                  <FormItem prop="province">
                    <Select v-model="form.data.province" placeholder="请选择省份">
                      <Option v-for="item in areaCodeList" :value="item.code" :key="item.code">{{item.name}}</Option>
                    </Select>
                  </FormItem>
                </Col>
                <Col span="7" offset="1">
                  <FormItem prop="city">
                    <Select v-model="form.data.city" placeholder="请选择城市">
                      <Option v-for="item in cityList" :value="item.code" :key="item.code">{{item.name}}</Option>
                    </Select>
                  </FormItem>
                </Col>
                <Col span="7" offset="1" placeholder="请选择区县">
                  <FormItem prop="county">
                    <Select v-model="form.data.county">
                      <Option v-for="item in countyList" :value="item.code" :key="item.code">{{item.name}}</Option>
                    </Select>
                  </FormItem>
                </Col>
              </Row>
            </FormItem>
            <FormItem prop="chagePerson" label="负责人姓名">
              <Input v-model="form.data.chagePerson" type="text" placeholder="请输入" :maxlength="20"></Input>
            </FormItem>
            <FormItem prop="qqNo" label="负责人QQ">
              <Input v-model="form.data.qqNo" type="text" placeholder="请输入" :maxlength="15"></Input>
            </FormItem>
            <FormItem prop="wechatNo" label="负责人微信">
              <Input v-model="form.data.wechatNo" type="text" placeholder="请输入" :maxlength="50"></Input>
            </FormItem>
            <FormItem prop="qqGroup" label="QQ群">
              <Input v-model="form.data.qqGroup" type="text" placeholder="请输入" :maxlength="20"></Input>
            </FormItem>
          </Col>
          <Col span="11" offset="2">
            <FormItem prop="qrCodePath" label="微信公众号">
              <upload-img v-if="loaded"  @on-change="onUploadQrcodeImg" :defaultImageList="defaultQrcodeImageList" maxLength="1"></upload-img>
            </FormItem>
            <FormItem prop="rclubShortName" label="简称">
              <Input v-model="form.data.rclubShortName" type="text" placeholder="请输入" :maxlength="50"></Input>
            </FormItem>
            <FormItem prop="address" label="地址">
              <Input v-model="form.data.address" type="text" placeholder="请输入" :maxlength="100"></Input>
            </FormItem>
            <FormItem prop="phone" label="办公电话">
              <Input v-model="form.data.phone" type="text" placeholder="请输入" :maxlength="20"></Input>
            </FormItem>
            <FormItem prop="mobile" label="负责人手机号">
              {{ form.data.mobile }}
            </FormItem>
            <FormItem prop="email" label="邮件">
              <Input v-model="form.data.email" type="text" placeholder="请输入" :maxlength="50"></Input>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="24">
            <FormItem prop="introduce" label="简介">
              <Input v-model="form.data.introduce" type="textarea" placeholder="请输入" :rows="8" :maxlength="500"></Input>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="onSubmit()" class="mr10">保存</Button>
              <Button @click="goView()">返回</Button>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Card>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { mapGetters } from 'vuex'
  import uploadImg from '@/components/upload-img'
  import codeApi from '@/api/code'
  import clubApi from '@/api/club'

  export default {
    name: 'page-club',
    components: {
      uploadImg
    },
    data () {
      return {
        isSubmiting: false,
        cityList: [],
        countyList: [],
        ruleValidate: {
          logoPath: [
            { required: true, message: '请输入上传俱乐部logo', trigger: 'change' }
          ],
          qrCodePath: [
            { required: true, message: '请输入上传微信公众号二维码', trigger: 'change' }
          ],
          rclubName: [
            { required: true, message: '请输入俱乐部名称', trigger: 'change' }
          ],
          province: [
            { required: true, message: '请选择省份', trigger: 'change' }
          ],
          city: [
            { required: true, message: '请选择城市', trigger: 'change' }
          ],
          county: [
            { required: true, message: '请选择区县', trigger: 'change' }
          ],
          address: [
            { required: true, message: '请输入地址', trigger: 'change' }
          ],
          chagePerson: [
            { required: true, message: '请输入负责人姓名', trigger: 'change' }
          ]
        },
        query: {
          pkRclubInfo: null
        },
        form: {
          data: {}
        },
        loaded: false
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo',
        areaCodeList: 'areaCodeList'
      })
    },
    watch: {
      'form.data.province': 'getCity',
      'form.data.city': 'getCounty'
    },
    methods: {
      onSubmit () {
        this.isSubmiting = true
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.submitForm()
          } else {
            this.$Message.error('表单验证失败，请根据提示检查输入项目!')
          }
          this.isSubmiting = false
        })
      },
      goView () {
        this.$router.push({path: '/club'})
      },
      async submitForm () {
        const { body } = await clubApi.update(this.form.data)
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info('修改成功')
          this.goView()
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      async detail () {
        this.query.pkRclubInfo = this.userInfo.pkRclubInfo
        const { body } = await clubApi.detail(this.query)
        const { responseData } = body
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.form.data = responseData
          this.defaultLogoImageList = Vue.filter('splitImg')(this.form.data.logoPath || '')
          this.defaultQrcodeImageList = Vue.filter('splitImg')(this.form.data.qrCodePath || '')
          this.loaded = true
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      async getCity () {
        let parentid = this.form.data.province
        const { body } = await codeApi.list({
          codeType: 'area',
          parentid: String(parentid)
        })
        this.cityList = body.responseData.map((item) => {
          let area = Object.assign({}, item)
          area.code = String(area.code)
          return area
        })
      },
      async getCounty () {
        let parentid = this.form.data.city
        const { body } = await codeApi.list({
          codeType: 'area',
          parentid: String(parentid)
        })
        this.countyList = body.responseData.map((item) => {
          let area = Object.assign({}, item)
          area.code = String(area.code)
          return area
        })
      },
      onUploadLogoImg (imgList) {
        this.form.data.logoPath = imgList.filter((item) => {
          return item.name.length > 0
        }).map((item) => {
          if (item.response && item.response.responseData) {
            return item.response.responseData
          } else {
            return item.name
          }
        }).join(',')
        this.$refs.form.validateField('logoPath')
      },
      onUploadQrcodeImg (imgList) {
        this.form.data.qrCodePath = imgList.filter((item) => {
          return item.name.length > 0
        }).map((item) => {
          if (item.response && item.response.responseData) {
            return item.response.responseData
          } else {
            return item.name
          }
        }).join(',')
        this.$refs.form.validateField('qrCodePath')
      }
    },
    async mounted () {
      this.$store.dispatch('getUserInfo')
      await this.$store.dispatch('getCode', 'area')
      this.detail()
    }
  }
</script>

<style lang="less">
  .club-info-form {
    width: 80%;
    margin: 0px auto;
    margin-top: 20px;
  }
</style>

